<template>
    <div class="flex">
        <Tree
            :title="treeTitle"
            @selectTree="selectTree"
            :treeData="treeData"
        />
        <div class="table" style="width: 100%">
            <Search :formState="formState" @searchData="onSearchList" />
            <a-card>
                <TableTools
                    :hasSelected="hasSelected"
                    :selectId="removeId"
                    :hasSelectedModify="hasSelectedModify"
                    @modify="onModify"
                    @del="onToolsDel"
                />
                <a-table
                    :row-selection="{
                        selectedRowKeys: selectedRowKeys,
                        onChange: onSelectChange,
                    }"
                    :pagination="{
                        onChange: onPageChange,
                        pageSize: formState.pageSize,
                        total: total,
                        showTotal: (total) => `共${total}条记录`,
                        size: 'middle',
                    }"
                    :rowKey="(record) => record.id"
                    :columns="columns"
                    :data-source="repositories"
                    size="middle"
                >
                    <template #expandedRowRender="{ record }">
                        <div>数据源标识：{{ record.id }}</div>
                        <div>数据源类型：{{ record.sjylx }}</div>
                        <div>数据源分类：{{ record.sjyfl }}</div>
                        <div>数据源名称：{{ record.sjlymc }}</div>
                        <div>数据源连接串：{{ record.url }}</div>
                        <div>备注：{{ record.bz }}</div>
                        <div>是否可用：{{ record.isable }}</div>
                        <div>数据库地址：{{ record.url }}</div>
                        <div>端口：{{ record.port }}</div>
                        <div>实例名：{{ record.sid }}</div>
                        <div>数据库版本号：{{ record.version }}</div>
                        <div>数据来源：{{ record.sjly }}</div>
                        <div>userid：{{ record.userid }}</div>
                        <div>time：{{ record.time }}</div>
                        <div>serverid：{{ record.serverid }}</div>
                    </template>
                    <template #operation="{ text: row, index }">
                        <a-tag color="#108ee9" @click="onEdit(row)">编辑</a-tag>
                        <a-popconfirm
                            title="你确定删除这条数据?"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="onDel(row.id, index)"
                        >
                            <a-tag color="red">删除</a-tag>
                        </a-popconfirm>
                        <a-tag @click="onReset(row)">重置</a-tag>
                        <a-tag @click="onVerify(row.id)">验证</a-tag>
                    </template>
                    <!-- <template #isable="{ text: row, index }">
                        <a-popconfirm
                            title="确认要停用数据源吗?"
                            ok-text="确认"
                            cancel-text="取消"
                            @confirm="onToggleChecked(row, index)"
                        >
                            <a-switch :checked="row.isable === '1'" />
                        </a-popconfirm>
                    </template> -->
                </a-table>
            </a-card>
            <Modal
                :visible="visible"
                :loading="loading"
                :title="title"
                :row="row"
                :type="type"
                @handleOk="onHandleConfirm"
                @handleCancel="onHandleCancel"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { submitFormApi, remove, verifyApi, reset, enable } from "@/api/index";
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import useRepositoryNameSearch from "./useRepositoryNameSearch";
import useRepositoryTable from "@/hooks/useRepositoryTable";
import Modal from "@/components/modal/ModalM.vue";
import Tree from "@/components/tree/TreeG.vue";
import TableTools from "./components/tableTools.vue";
import Search from "./components/search.vue";
import { message } from "ant-design-vue";
import custom from "@/api/use-data";
interface FormState {
    sjymc: string;
    sjylx: string;
    sjyfl: String;
    pageSize: number;
    pageNum: number;
    orderByColumn: string;
    isAsc: string;
}
export default defineComponent({
    name: "DataManage",
    setup() {
        const formState = reactive<FormState>({
            sjymc: "",
            sjylx: "",
            sjyfl: "",
            pageSize: 10,
            pageNum: 1,
            orderByColumn: "",
            isAsc: "asc",
        });
        const columns = [
            { title: "数据来源", dataIndex: "sjly", key: "sjly" },
            { title: "数据源名称", dataIndex: "sjymc", key: "sjymc" },
            { title: "数据源分类", dataIndex: "sjyfl", key: "sjyfl" },
            { title: "数据源类型", dataIndex: "sjylx", key: "sjylx" },
            { title: "数据库地址", dataIndex: "ip", key: "ip" },
            { title: "端口", dataIndex: "port", key: "port" },
            { title: "数据库实例", dataIndex: "sid", key: "sid" },
            { title: "数据库版本", dataIndex: "version", key: "version" },
            { title: "创建时间", dataIndex: "time", key: "time" },
            // {
            //     title: "是否启用",
            //     key: "isable",
            //     slots: { customRender: "isable" },
            // },
            {
                title: "操作",
                key: "operation",
                slots: { customRender: "operation" },
            },
        ];
        const {
            total,
            repositories,
            getUserRepositories,
        } = useRepositoryNameSearch(formState);
        onMounted(getUserRepositories);
        const {
            state,
            hasSelected,
            onSelectChange,
            hasSelectedModify,
        } = useRepositoryTable();
        const store = reactive({
            treeTitle: "数据源类型",
            loading: false,
            visible: false,
            title: "",
            type: 0,
            row: {
                id: ''
            },
            onSearchList(formState: FormState) {
                formState = formState;
                getUserRepositories();
            },
            onModify():void {
                store.onEdit(state.currItem);
            },
            onToolsDel():void {
                getUserRepositories();
            },
            onToggleChecked(row: { isable: string; id: string },index: number ):void {
                const type = row.isable === "1" ? "disable" : "enable";
                enable(row.id, type, "1").then(({ msg }: any) => {
                    repositories.value[index].isable =
                        row.isable === "1" ? "0" : "1";
                    message.success(msg);
                });
            },
            onPageChange(currentPage: number): void {
                formState.pageNum = currentPage;
                getUserRepositories();
            },
            onHandleConfirm(form: any) {
                store.loading = true;
                switch (store.type) {
                    case 1:
                        submitFormApi(form).then(({ msg }: any) => {
                            getUserRepositories();
                            store.loading = false;
                            store.visible = false;
                            message.success(msg);
                        });
                        break;
                    case 2:
                        reset(store.row.id, form.yhm, form.fwmm).then(
                            ({ msg }: any) => {
                                store.loading = false;
                                store.visible = false;
                                message.success(msg);
                            }
                        );
                        break;
                    default:
                        break;
                }
            },
            onHandleCancel():void {
                store.loading = false;
                store.visible = false;
            },
            onEdit(row: any) {
                store.row = row;
                store.loading = false;
                store.visible = true;
                store.title = "编辑数据源";
                store.type = 1;
            },
            onDel(id: string, index: number):void {
                remove(id).then(({ msg }: any) => {
                    repositories.value.splice(index, 1);
                    message.success(msg);
                });
            },
            onVerify(id: string): void {
                verifyApi(id).then((res: any) => {
                    res === 1
                        ? message.success("验证成功")
                        : message.error("验证失败");
                });
            },
            onReset(row: any): void {
                store.row = row;
                store.loading = false;
                store.visible = true;
                store.title = "重置密码";
                store.type = 2;
            },
            selectTree(type: string):void {
                formState.sjylx = type;
                getUserRepositories();
            },
        });
        return {
            total,
            formState,
            repositories,
            columns,
            onSelectChange,
            hasSelected,
            hasSelectedModify,
            ...toRefs(state),
            ...toRefs(store),
            treeData: custom.treeData,
        };
    },
    components: {
        Search,
        TableTools,
        Modal,
        Tree,
    },
});
</script>